<template>
  <div id="app">
    <RecyclerView 
      :prerender="30"
      :fetch="MiFetch" 
      :item="MiItem" 
      :tombstone="MiTomstone">
    </RecyclerView>
  </div>
</template>

<script>
import Vue from 'vue';
import VueResource from 'vue-resource';
// import Page from '../components/page/page.vue';
// import MiniRefresh from '../components/minirefresh/minirefresh.vue';
import VueRecyclerviewNew from 'vue-recyclerview';
Vue.use(VueRecyclerviewNew);
Vue.use(VueResource);

export default {
    name: 'HelloWorld',
    components: {
        Page,
        minirefresh: MiniRefresh,
    },
    data() {
        return {
            host: 'https://ssyer.oss-cn-hangzhou.aliyuncs.com/',
            pictures: [],
            pageNo: 0,
            pageSize: 10,
            loadUrl: 'https://mobile.ssyer.com/picture/index?',

            options: {
                container: '#minirefresh',
                up: {
                    isAuto: true,
                    loadFull: {
                        isEnable: true,
                    },
                },
            },
        };
    },
    mounted() {
        //  this.onPullingDown();
    },
    methods: {
        onPullingDown() {
            this.pageNo = 1;
            this.listPicture().then((data)=>{
                this.pictures = data;
                this.$refs.minirefresh.endDownLoading();
            });
        },
        onPullingUp() {
            this.pageNo++;
            this.listPicture().then((data)=>{
                this.pictures = this.pictures.concat(data);
                this.$refs.minirefresh.endUpLoading(data.length != this.pageSize);
            });
        },
        listPicture(callback) {
            const url = `${this.loadUrl}pageNo=${this.pageNo}&size=${this.pageSize}`;
            const promise = new Promise(function(resolve, reject) {
                Vue.http.get(url).then((response) => {
                    const data = response.body.data;
                    resolve(data);
                }, (response) => {
                    reject(response);
                });
            });
            return promise;
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
